<!DOCTYPE html>
<!--suppress ALL-->
<html xmlns:th="http://www.thymeleaf.org">

<div th:replace="~{/fragment/common-fragment :: head(播放列表)}"></div>

<body>
<div class="wrapper">
    <!-- Header section -->
    <div th:replace="~{/fragment/common-fragment :: header}"></div>

    <!-- Main content -->
    <section class="container">
        <div class="col-sm-12">

            <!-- MovieService preview item -->
            <div th:each="movie:${movies.list}" class="movie movie--preview movie--full release">
                <div class="col-sm-3 col-md-2 col-lg-2">
                    <div class="movie__images">
                        <img alt="" th:src="${movie.poster}"/>
                    </div>
                    <!-- 评论数 -->
                    <div class="movie__feature">
                        <a href="#" class="movie__feature-item movie__feature--comment">123</a>
                    </div>
                </div>

                <div class="col-sm-9 col-md-10 col-lg-10 movie__about">
                    <a th:href="'/movie/'+${movie.id}" th:text="${movie.name}" class="movie__title link--huge"
                    >Last Vegas (2013)</a>

                    <p th:text="${movie.duration}+' min'" class="movie__time">105 min</p>

                    <p class="movie__option">
                        <strong>Country: </strong><a th:text="${movie.country}"
                                                     th:href="'/byCountry/'+${movie.country}">USA</a>
                    </p>
                    <p class="movie__option">
                        <strong>Category: </strong><a th:each="cate:${movie.categories}" th:text="${cate.name}+' '"
                                                      th:href="'/byCategory/'+${cate.name}">Comady</a>
                    </p>
                    <p class="movie__option">
                        <strong>Release date: </strong><span
                            th:text="${#dates.format(movie.releaseDate,'yyyy-MM-dd')}">November 1, 2013</span>
                    </p>
                    <p class="movie__option">
                        <strong>Director: </strong><a th:href="'/byDirector/'+${movie.directors}"
                                                      th:text="${movie.directors}">Jon Turteltaub</a>
                    </p>
                    <p class="movie__option">
                        <strong>Actors: </strong><a th:text="${movie.actors}" th:href="'/byActors/'+${movie.actors}">Robert
                        De Niro</a>
                    </p>
                    <p class="movie__option">
                        <strong>Age restriction: </strong><a href="#">13</a>
                    </p>

                    <div class="movie__btns">
                        <a th:href="@{/book1(movieId=${movie.id})}" class="btn btn-md btn--warning">预订此电影</a>
                        <a th:attr="data-movieId=${movie.id}" class="watchlist removeWatchlist">从播放列表移除</a>
                    </div>

                    <div class="preview-footer">
                        <div class="movie__rate">
                            <div class="score"></div>
                            <span th:text="${movie.count}+ ' 个评分'" class="movie__rate-number">170 个评分</span>
                            <span th:text="${movie.score}" class="movie__rating">5.0</span>
                        </div>
                    </div>
                </div>

                <div class="clearfix"></div>
            </div>
            <!-- end movie preview item -->

            <div class="coloum-wrapper">
                <div class="pagination paginatioon--full">
                    <a th:if="${movies.hasPreviousPage}" th:href="@{/watch-list(page=${movies.pageNum}-1)}"
                       class="pagination__prev">prev</a>
                    <a th:if="${movies.hasNextPage}" th:href="@{/watch-list(page=${movies.pageNum}+1)}"
                       class="pagination__next">next</a>
                </div>
            </div>
        </div>
    </section>

    <div class="clearfix"></div>

    <div th:insert="~{/fragment/common-fragment :: footer}"></div>
</div>

<!-- open/close -->
<div th:replace="~{/fragment/common-fragment :: pop}"></div>
<!-- JavaScript-->
<div th:replace="~{/fragment/common-fragment :: script}"></div>

<script type="text/javascript">
    $(document).ready(function () {
        init_MovieList();
    });
</script>
</body>
</html>
